<!-- 主页面左侧 -->
<template>
  <div id="mainleft">
    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">

      <template v-for="treeoneobj in treelistarr">
        <el-submenu :index="treeoneobj.id" key="treeoneobj.id">
          <template slot="title">
            <i :class="treeoneobj.icon" style="color: #409EFF;"></i>
            <span>{{treeoneobj.title}}</span>
          </template>

          <el-submenu :index="twomenuobj.id" v-for="twomenuobj in treeoneobj.twomenu" key="twomenuobj.id">
            <template slot="title"><i :class="twomenuobj.icon"
                style="color: skyblue;"></i>{{twomenuobj.title}}</template>
            <el-menu-item :index="threemenuobj.id" key="threemenu.id" v-for="threemenuobj in twomenuobj.threemenu"><i
                :class="threemenuobj.icon" style="color: skyblue;"></i>
              <!-- <el-link :underline="false" @click="">{{threemenuobj.title}}</el-link> -->
              <router-link :to="threemenuobj.href" style="text-decoration: none;color: #303133;">
                {{threemenuobj.title}}
              </router-link>
            </el-menu-item>
          </el-submenu>
        </el-submenu>
      </template>
    </el-menu>

    <!-- <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>

      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>导航一</span>
        </template>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu> -->
    <!-- </el-menu> -->
  </div>
</template>

<script>
  export default {
    name: "mainleft",
    data() {
      return {
        treelistarr: [{
          "id": 1,
          "title": "系统设置",
          "icon": "el-icon-location",
          "twomenu": [{
            "id": "12",
            "title": "菜单权限设置",
            "icon": "el-icon-setting",
            "threemenu": [{
              "id": "121",
              "title": "角色权限菜单",
              "icon": "el-icon-user",
              "href":"/RolepermismangeVue"
            }, {
              "id": "122",
              "title": "导航一 二级2",
              "icon": "el-icon-share",
              "href":"/HelloWorld"
            }, {
              "id": "123",
              "title": "导航一 二级2",
              "icon": "el-icon-star-off",
              "href":"/addpermismanageVue"
            }]
          }, {
            "id": "13",
            "title": "导航一 二级",
            "icon": "el-icon-document-copy",
            "threemenu": [{
              "id": "131",
              "title": "导航一 二级1",
              "icon": "el-icon-s-data",
              "href":"/"
            }, {
              "id": "132",
              "title": "导航一 二级2",
              "icon": "el-icon-s-order",
              "href":"/"
            }, {
              "id": "133",
              "title": "导航一 二级2",
              "icon": "el-icon-finished",
              "href":"/"
            }]
          }]
        }]
      }
    }
  }
</script>

<style>
  .el-submenu {
    text-align: left;
  }
</style>
